<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>员工表格练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="i1">
<input type="text" placeholder="请输入员工工资" id="i2">
<input type="text" placeholder="请输入员工岗位" id="i3">
<button onclick="addEmp()">添加员工</button>
<hr>
<table border="1">
  <caption>员工表</caption>
  <tr>
    <th>姓名</th>
    <th>工资</th>
    <th>岗位</th>
  </tr>
</table>

<script>
  function $(id){
    return document.getElementById(id);
  }
  function addEmp(){
    //1.获取用户输入的数据
    let name = $("i1").value;
    let salary = $("i2").value;
    let job = $("i3").value;
    //2.构建三个td元素
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let td3 = document.createElement("td");
    //3.在td中追加内容
    td1.innerHTML=name;
    td2.innerHTML=salary;
    td3.innerHTML=job;
    //3.创建tr元素
    let tr = document.createElement("tr");
    //4.将三个td元素追加到tr中
    tr.append(td1,td2,td3);
    //5.将tr追加到table中
    let table=document.querySelector("table");
    table.appendChild(tr);
    //3.清空数据
    $("i1").value=""
    $("i2").value=""
    $("i3").value=""
  }
</script>

</body>
</html>